<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选择出行需求</title>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.content{
		width: 100%;
		height: auto;
		overflow: hidden;
	}
	.header{
		background-color: #fff;
		position: relative;
		z-index: 2000;
	}
	.wrapper{
		width: 1200px;
		padding: 0 5px;
		margin: 0 auto;
	}
	.header-cont{
		height: 80px;
		box-sizing: border-box;
	}
	.logo{
		float: left;
		margin: 15px 0 0 0;
	}
	.logo img{
		width: 200px;
		height: 50px;
	}
	.header-right{
		float: right;
		margin: 24px 0 0 0;
		width: 940px;
		height: 40px;
		background: image-set(url("img/train.png") 1x,url("img/train@2x.png") 2x);
		background-repeat: no-repeat;
		position: relative;
		z-index: 2000;
	}
	.header-search{
		width: 380px;
		float: left;
		margin: 5px 0 5px 90px;
	}
	.header-menu{
		float: right;
		padding-right: 10px;
	}
	.search-bd{
		width: 350px;
		position: relative;
	}
	.search-input{
		width: 100%;
		float: left;
		height: 30px;
		line-height: 20px;
		border: 1px solid #dedede;
		padding: 4px 10px;
		background-color: #fff;
		color: #333;
		outline: none;
		font-size: 14px;
		box-sizing: border-box;
	}
	.search-btn{
		float: left;
		width: 30px;
		color: #FFFFFF;
		height: 30px;
		line-height: 30px;
		background-color: #5696DE;
		border: none;
		text-align: center;
		cursor: pointer;
		outline: none;
	}
	.search-btn img{
		width: 16px;
		height: 16px;
	}
	.header-menu li{
		float: left;
		margin-left: 10px;
		height: 40px;
		line-height: 40px;
		font-size: 12px;
		position: relative;
		list-style: none;
		color: #3b99fc;
		font-size: 12px;
	}
	.menu-line{
		color: #acd1f9;
	}
	.menu-login a{
		color: #333;
		text-decoration: none;
		background-color: transparent;
		margin-left: 10px;
	}
	.nav-box{
		height: 40px;
		background-color: #3b99fc;
	}
	.nav{
		width: 1190px;
		margin: 0 auto;
		height: 40px;
		position: relative;
		z-index: 1900;
	}
	.nav li{
		list-style: none;
		width: 145px;
		float: left;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #fff;
	}
	.active{
		background-color: #2676e3;
		color: #fff;
	}
	.banner{
		width: 100%;
		height: 450px;
		position: relative;
		background: url("./img/banner12.jpg");
	}
	.search-index{
		position: absolute;
		top: 10%;
		left: 50%;
		margin-left: -595px;
		z-index: 100;
		width: 510px;
		height: 350px;
		background: #fff;
	}
	li{
		list-style: none;
		cursor: pointer;
	}
	.search-side{
		float: left;
		width: 100px;
		height: auto;
	}
	.search-side li{
		background: #3b99fc;
		border-bottom: 1px solid #86bffb;
		height: 116px;
		text-align: center;
		line-height: 116px;
		color: white;
		font-size: 16px;
	}
	.search-side-active{
		background: #fff !important;
		color: #3b99fc !important;
		border-left: 4px solid #3b99fc !important;
	}
	.search-main{
		float: left;
		width: 410px;
		height: 350px;
		padding: 32px 25px 0 25px;
		box-sizing: border-box;
	}
	.search-tab-hd{
		height: 34px;
		border-bottom: 2px solid #dedede;
	}
	.search-tab-hd li{
		float: left;
		width: 25%;
		text-align: center;
		position: relative;
		font-size: 14px;
		height: 34px;
		line-height: 34px;
	}
	.search-tab-hd-active{
		color: #3b99fc;
		border-bottom: 2px solid #3b99fc;
	}

	.search-tab-bd{
		display: block;
		margin-top: 30px;
		position: relative;
	}
	.form-item{
		height: 30px;
		margin-top: 16px;
	}
	.form-item label{
		width: 75px;
		text-align: right;
		padding-right: 10px;
		font-size: 14px;
		display: inline-block;
	}
	.form-item select{
		width: 265px;
		height: 30px;
		line-height: 30px;
	}

	.btn{
		display: block;
		border-radius: 6px;
		font-size: 14px;
		background-color: #FF8000;
		color: #fff;
		border: none;
		outline: none;
		height: 30px;
		line-height: 30px;
		margin-top: 30px;
		width: 100%;
		cursor: pointer;
	}
	.service-list{
		height: 136px;
	}
	.service-list li{
		float: left;
		width: 14.2%;
		padding: 35px 0;
		line-height: 20px;
		text-align: center;
		font-size: 14px;
	}
	.service-icon{
		display: block;
		width: 36px;
		height: 36px;
		margin: 0 auto 5px;
		background:url("img/service.png") ;
	}
	.icon-s2{
		background-position: 0 -40px;
	}
	.icon-s3{
		background-position: 0 -80px;
	}
	.icon-s4{
		background-position: 0 -120px;
	}
	.icon-s5{
		background-position: 0 -160px;
	}
	.icon-s6{
		background-position: 0 -200px;
	}
	.icon-s6{
		background-position: 0 -240px;
	}
	.icon-s9{
		background-position: 0 -320px;
	}

	.service-lg{
		overflow: hidden;
	}
	.service-lg ul{
		margin-right: -10px;
		height: 165px;
	}
	.service-lg ul li{
		float: left;
		width: 590px;
		height: 160px;
		margin-right: 10px;
		overflow: hidden;
		margin-bottom: 10px;
	}
	.service-lg ul li img{
		display: block;
		width: 100%;
		height: 100%;
	}

</style>
</head>
<body>
<div class="content">
	<div class="header">
		<div class="wrapper">
			<div class="header-cont">
				<h1 class="logo">
					<img src="img/title.png" alt="">
				</h1>
				<div class="header-right">
					<div class="header-search">
						<div class="search-bd">
							<input type="text" class="search-input" placeholder="搜索车票、餐饮、常旅客、相关规定">
						</div>
						<a href="javascript:;" class="search-btn">
							<img src="img/search.png" alt="">
						</a>
					</div>
					<ul class="header-menu">
						<li>无障碍</li>
						<li class="menu-line">|</li>
						<li>爱心版</li>
						<li class="menu-line">|</li>
						<li>English</li>
						<li class="menu-line">|</li>
						<li>我的12306</li>
						<li class="menu-line">|</li>
						<li class="menu-login">
							<a href="login.html">登录</a>
							<a href="signup.html">注册</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="nav-box">
			<ul class="nav">
				<li class="active">首页</li>
				<li>车票</li>
				<li>团购服务</li>
				<li>会员服务</li>
				<li>站车服务</li>
				<li>商旅服务</li>
				<li>出现指南</li>
				<li>信息查询</li>
			</ul>
		</div>
	</div>
	<div class="banner">
		<div class="search-index">
			<ul class="search-side">
				<li class="search-side-active">车票</li>
				<li>常用查询</li>
				<li>订餐</li>
			</ul>
			<div class="search-main">
				<ul class="search-tab-hd">
					<li class="search-tab-hd-active">单程</li>
					<li>往返</li>
					<li>中转换乘</li>
					<li>改退签</li>
				</ul>
				<div class="search-tab-bd">
					<form action="trainInfoServlet">
						<div class="form-item">
							<label>出发地</label>
							<select name="select_origin">
							</select>
						</div>
						<div class="form-item">
							<label>到达地</label>
							<select name="select_destination">
							</select>
						</div>
						<div class="form-item">
							<label>出发日期</label>
							<select name="select_date">
							</select>
						</div>
						<input type="submit" value="查询" id="btn" class="btn">
					</form>
				</div>
			</div>
		</div>
	</div>
	<div class="wrapper">
		<ul class="service-list">
			<li>
				<i class="service-icon icon-s2"></i>
				<div>重点旅客预约</div>
			</li>
			<li>
				<i class="service-icon icon-s6"></i>
				<div>遗失物品查找</div>
			</li>
			<li>
				<i class="service-icon icon-s4"></i>
				<div>约车服务</div>
			</li>
			<li>
				<i class="service-icon icon-s5"></i>
				<div>便民拖运</div>
			</li>
			<li>
				<i class="service-icon icon-s3"></i>
				<div>车站引导</div>
			</li>
			<li>
				<i class="service-icon icon-s7"></i>
				<div>车站风采</div>
			</li>
			<li>
				<i class="service-icon icon-s9"></i>
				<div>用户反馈</div>
			</li>
		</ul>
		<div class="service-lg">
			<ul>
				<li>
					<img src="img/abanner01.jpg" alt="">
				</li>
				<li>
					<img src="img/abanner02.jpg" alt="">
				</li>
				<li>
					<img src="img/abanner05.jpg" alt="">
				</li>
				<li>
					<img src="img/abanner06.jpg" alt="">
				</li>
			</ul>
		</div>
	</div>
</div>

</div>
</body>
</html>
